import React, { useState, useContext } from 'react'
import { GlobalContext } from '../index'
import './index.css'

export default function Login(props) {
  const [username, setUsername] = useState('');
  const [isShow, setIsShow] = useState(false);
  const [isLogin, setIsLogin] = useState(false);
  const { setName } = useContext(GlobalContext);

  //修改登陆状态
  const UserLogoin = () => {
    setIsShow(true)
  }
  //登陆
  const Login = () => {
    setName(username)
    setIsShow(false)
    setIsLogin(true)
  }
  //退出登陆
  const onLoginUser = () => {
    setUsername("")
    setIsShow(false);
    setIsLogin(false)
  }
  return (
    <div>

      <div className="login-header">
        {isLogin && <span><i className="iconfont icon-user"></i>{username}</span>}
        {!username ? <span onClick={() => UserLogoin()}>登陆</span> : <span onClick={() => onLoginUser()}>退出</span>}
      </div>


      {isShow ? <div className="login-box">
        <div className="login-box-container">
          <div>
            <div>登陆</div>
            <input type="texr" onChange={(e) => {
              setUsername(e.target.value)
            }}></input><br />
            <div className="login-button">
              <button onClick={() => onLoginUser()}>取消</button>
              <button onClick={() => Login()}>登陆</button>
            </div>
          </div>
        </div>
      </div> : ''}
    </div>
  )
}
